<!DOCTYPE html>
<head>
  <meta charset="utf-8">

  <title>Tabs</title>
  <meta name="description" content="Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views. ">

  <link rel="stylesheet" href="tabs.css">
  <link rel="stylesheet" href="icons.css">

  <!--
    This <style> and <link> is only used for the example code, is no needed for the real case use
  -->
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }

    body {
      background: none;
    }

    h2.bb-docs {
      font-size: 1.8rem;
      font-family: sans-serif;
      font-weight: lighter;
      color: #666;
      margin: -1px 0 0;
      background-color: #f5f5f5;
      padding: 0.4rem 0.4rem 0.4rem 3rem;
      border: solid 1px #e8e8e8;
    }
  </style>
</head>
<body role="application">

  <section role="region">
    <!-- if your tabs are at the top, remove class="bottom" -->
    <ul role="tablist" data-items="4" class="bottom">
      <li id="panel1" role="tab">
        <a href="#panel1" class="icon icon-smiley">smiley</a>
        <div role="tabpanel"></div>
      </li>
      <li id="panel2" role="tab">
        <a href="#panel2" class="icon icon-picture">picture</a>
        <div role="tabpanel"></div>
      </li>
      <li id="panel3" role="tab" aria-disabled="true">
        <a class="icon icon-mask">mask</a>
        <div role="tabpanel"></div>
      </li>
      <li id="panel4" role="tab">
        <a href="#panel4">Tab name</a>
        <div role="tabpanel"></div>
      </li>
    </ul>
  </section>

</body>
</html>
